<!--
Fontmin Preview

Example:

<fm-preview></fm-preview>

@group Fontmin Elements
@element fm-preview
-->
<link rel="import" href="../dep/polymer/polymer.html">
<link rel="import" href="../dep/layout/layout.html">

<dom-module id="fm-preview">

    <style>
        :host {
            padding: 20px;
            background: #fff;
            font-size: 1.4em;
            line-height: 1.6em;
            transition: background, color .3s ease;
            overflow: auto;
            -webkit-user-select: none;
        }
        :host([dark]) {
            color: #fff;
            background: #505050;
        }
        #tips {
            opacity: .3;
            font-size: 14px;
        }
        #content {
            word-break: break-word;
            font-weight: 400;
        }
    </style>

    <template>
        <div hidden$="[[_computeTipsStatus(content)]]" id="tips">示例文字，请在左侧输入文本片段</div>
        <div id="content"></div>
    </template>

</dom-module>

<script>
    Polymer({
        is: 'fm-preview',

        properties: {
            dark: {
                type: Boolean,
                value: false,
                reflectToAttribute: true
            },
            content: {
                type: String
            },
            family: {
                type: String
            },
            src: {
                type: String
            }
        },

        _computeTipsStatus: function (value) {
            return !!value;
        },

        setContent: function (value) {
            if (!value) {
                var defaultContent = [
                    '青玉案·元夕',
                    '东风夜放花千树。',
                    '更吹落、星如雨。',
                    '宝马雕车香满路。',
                    '凤箫声动，玉壶光转，一夜鱼龙舞。',
                    '蛾儿雪柳黄金缕。',
                    '笑语盈盈暗香去。',
                    '众里寻他千百度。',
                    '蓦然回首，那人却在，灯火阑珊处。'
                ];

                this.content = '';
                this.$.content.innerHTML = defaultContent.join('<br>');
            }
            else {
                this.content = value;
                this.$.content.innerHTML = this.encodeHTML(value);
            }
        },

        setFont: function (family, src) {
            var self = this;

            // fix windows url
            if (process.platform === 'win32') {
                src = src.replace(/\\/g, '\\\\');
            }

            var font = new FontFace(
                family,
                'url("' + src + '")'
            );

            font.load().then(function (loaded) {
                document.fonts.add(loaded);

                self.$.content.style.fontFamily = family;

                self.family = family;
                self.src = src;
            });
        },

        resetFont: function () {
            this.$.content.style.fontFamily = '"Helvetica Neue", Arial, sans-serif';

            this.family = '';
            this.src = '';
        },

        ready: function () {
            this.resetFont();
            this.setContent();

            this.addEventListener('click', this.toggleMode.bind(this));
        },

        toggleMode: function () {
            this.dark = !this.dark;
        },

        darkChanged: function (newValue) {
            newValue ? this.setAttribute('dark', true) : this.removeAttribute('dark');
        },

        encodeHTML: function (str) {
            if (!str) {
                return '';
            }

            return String(str).replace(/&/g, '&amp;')
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;')
                .replace(/"/g, '&quot;')
                .replace(/'/g, '&#39;')
                .replace(/\n/g, '<br>');
        }
    });
</script>
